<template>
	<view class="container">
		<view class="nav_item">
			<view class="reportType_body">
				<view class="card_top">
					<image :src="couponDate.ticketImgUrl" mode="aspectFill"></image>
					<view class="use-name">{{ couponDate.ticketName }}</view>
					<view class="use-time">有效期截止至：{{ couponDate.validityEndTime }}</view>
					<view class="link" v-if="couponDate.tickerUrl">
						<image src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/personal/link.png" mode="aspectFit"></image>
						<text ref="urls" style="user-select: all;position: absolute;top: -2000rpx;">{{ couponDate.tickerUrl }}</text>
						<text @click="copy(couponDate.tickerUrl, 'urls')">复制链接</text>
					</view>
					<view style="font-size: 22rpx;color: #8A8C8D" v-if="couponDate.tickerUrl">复制并打开浏览器搜索领取</view>
					<view class="use-info">
						<view class="info-number" v-if="couponDate.ticketNo">
							<text>
								卡号：
								<text ref="cardNum" style="user-select: all;">{{ couponDate.ticketNo }}</text>
							</text>
							<text class="copy" @click="copy(couponDate.ticketNo, 'cardNum')">复制卡号</text>
						</view>
						<view class="info-password" v-if="couponDate.tickerPwd">
							<text>
								密码：
								<text ref="cardPsd" style="user-select: all;">{{ couponDate.tickerPwd }}</text>
							</text>
							<text class="copy" @click="copy(couponDate.tickerPwd, 'cardPsd')">复制密码</text>
						</view>
					</view>
				</view>
				<view class="line-border"><view class="line"></view></view>
				<view class="card_detail">
					<view class="card_detail_title">券码详情</view>
					<view class="card_detail_content" v-html="couponDate.ticketUsageRules"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
export default {
	onShareAppMessage() {
		return getCommonShareInfo()
	},
	data() {
		return {
			toggle: false,
			arrow: 'arrowdown',
			active: -1,
			isActive: 1,
			couponDate: [],
			detailId: ''
		};
	},
	onLoad(option) {
		this.detailId = option.detailId;
		this.detail();
	},
	methods: {
		copy(data, id) {
			// #ifdef MP-WEIXIN
			uni.setClipboardData({
				data,
				success() {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			});
			//#endif
			// #ifdef H5
			const dom = this.$refs[id].$el;
			const selection = window.getSelection();
			const range = document.createRange();
			if (!dom || !selection || !range) return;
			// 选择复制目标
			range.selectNodeContents(dom);
			selection.removeAllRanges();
			selection.addRange(range);
			// 执行复制
			document.execCommand('copy');
			// 去除所有选中
			selection.removeAllRanges();
			// 复制内容成功，通过ctrl+v粘贴使用！
			uni.showToast({
				title: '复制成功！',
				icon: 'none'
			});
			//#endif
		},
		detail() {
			http('/api/sysTicketInfo/' + this.detailId, { data: {}, method: 'GET' }).then(
				result => {
					if (result.code == '200') {
						this.couponDate = result.data;
					}
				},
				result => {
					this.showLoading = false;
					uni.showToast({
						title: result.msg,
						icon: 'none'
					});
				}
			);
		},
		chenked(type) {
			this.isActive = type;
		},
		toggleFun() {
			this.toggle = !this.toggle;
			if (this.toggle) {
				this.arrow = 'arrowup';
			} else {
				this.arrow = 'arrowdown';
			}
		}
	},
	components: { uniIcons, uniGrid, uniGridItem }
};
</script>

<style lang="less" scoped>
.container {
	width: 100%;
	background-color: #fff;
	color: #66645d;
	font-size: 26rpx;
	padding-top: 20rpx;
	height: calc(100vh - 20rpx);
	.nav {
		border-top: 1rpx solid #f2f2f2;
		background-color: #fff;
		.flex_between {
			display: flex;
			.nav_title {
				height: 88rpx;
				line-height: 88rpx;
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				color: #8a8c8d;
			}
		}
	}
	.line-border {
		width: calc(100% + 48rpx);
		margin-left: -24rpx;
		overflow: hidden;
		padding: 24rpx;
		.line {
			border-bottom: 2rpx dashed #c4c5c6;
			position: relative;
			&::before {
				content: '';
				position: absolute;
				width: 24rpx;
				height: 24rpx;
				left: -36rpx;
				top: -12rpx;
				border-radius: 50%;
				background-color: #fff;
				box-shadow: inset 0rpx 0rpx 20rpx 10rpx rgba(102, 100, 93, 0.1);
			}
			&::after {
				content: '';
				position: absolute;
				width: 24rpx;
				height: 24rpx;
				right: -36rpx;
				top: -12rpx;
				border-radius: 50%;
				background-color: #fff;
				box-shadow: inset 0rpx 0rpx 20rpx 10rpx rgba(102, 100, 93, 0.1);
			}
		}
	}
	.nav_item {
		padding: 24rpx 40rpx;
		.reportType_body {
			background: #fff;
			border-radius: 12rpx;
			padding: 32rpx 24rpx 60rpx 24rpx;
			background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/cardBg.png) no-repeat bottom left;
			background-size: 100% 76rpx;
			box-shadow: 0rpx 0rpx 20rpx 10rpx rgba(102, 100, 93, 0.1);
			.card_top {
				text-align: center;
				font-size: 26rpx;
				color: #66645d;
				padding-bottom: 32rpx;
				.link {
					color: #f39800;
					font-size: 26rpx;
					margin-top: 32rpx;
					display: flex;
					//align-items: center;
					justify-content: center;
					margin-bottom: 84rpx;
					height: 37rpx;
					line-height: 97rpx;
					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 6rpx;
					}
				}
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 100%;
					margin: 34rpx 0 24rpx 0;
				}
				.use-name {
					font-size: 26rpx;
					font-weight: 500;
					color: #66645d;
					line-height: 37rpx;
					margin-bottom: 2rpx;
				}
				.use-time {
					font-size: 24rpx;
					line-height: 33rpx;
					color: #8a8c8d;
					margin-top: 6rpx;
				}
				.use-info {
					display: inline-flex;
					flex-direction: column;
					text-align: left;
					margin-top: 32rpx;
					.copy {
						margin-left: 20rpx;
						font-weight: 500;
						color: #f39800;
						text-decoration: underline;
					}
					.info-number,
					.info-password {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26rpx;
						font-weight: 500;
						color: #66645d;
						line-height: 37rpx;
					}
					.info-password {
						margin-top: 20rpx;
					}
				}
			}
			.card_detail {
				.card_detail_title {
					font-size: 26rpx;
					font-weight: 500;
					color: #66645d;
					padding: 31rpx 0;
				}
				.card_detail_content {
					font-size: 26rpx;
					color: #8a8c8d;
					line-height: 44rpx;
				}
			}
		}
	}
}

.active {
	position: relative;
	color: #66645d;
}

.active::after {
	content: '';
	position: absolute;
	width: 40rpx;
	height: 6rpx;
	border-radius: 8rpx;
	background-color: #66645d;
	left: 0rpx;
	right: 0rpx;
	bottom: 0rpx;
	margin: auto;
}
.lineBg {
	height: 66rpx;
	position: absolute;
	left: 40rpx;
	top: 100rpx;
	image {
		height: 66rpx;
	}
}
</style>
